<template>
	<view class="qiun-columns">
		<view v-if="tabCur==0">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt" style="width: 100%;">
				<view class="qiun-title-dot-light">月统计情况:总支出:{{expenditureSum}}元</view>
			</view>
			<view class="qiun-charts col notData" v-if="expenditureSum==0">
				暂无月支出统计
			</view>
			<view class="qiun-charts" v-if="expenditureSum>0">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasPie" id="canvasPie" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
				 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchPie"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas  canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
				<!--#endif-->
			</view>
		</view>
		<view v-if="tabCur==1">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt" style="width: 100%;">
				<view class="qiun-title-dot-light">月统计情况:总收入:{{incomeSum}}元</view>
			</view>
			
			<view class="qiun-charts col notData" v-if="incomeSum==0">
				暂无月收入统计
			</view>

			<view class="qiun-charts" v-if="incomeSum>0">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="incomeCanvasPie" id="incomeCanvasPie" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
				 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchIncomeCanvasPie"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="incomeCanvasPie" id="incomeCanvasPie" class="charts" @touchstart="touchIncomeCanvasPie"></canvas>
				<!--#endif-->
			</view>
		</view>

		<!-- 	<view>
			<button class="cu-btn round bg-gradual-blue" @click="getServerData">刷新</button>
		</view> -->
		<br>
		<view class="cu-form-group">
			<view class="title">日期</view>
			<picker mode="date" :value="date" fields="month" @change="dateChange">
				<view class="picker">
					{{date}}
				</view>
			</picker>
		</view>
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt" style="width: 100%;">
			<view class="qiun-title-dot-light">日统计情况:日{{tabCur==0?'支出':'收入'}}:{{daySum}}元</view>
		</view>
		<view class="qiun-charts notData col" v-if="daySum==0">暂无日{{tabCur==0?'支出':'收入'}}统计</view>
		<view class="qiun-charts" v-if="daySum>0">
			<view class="canvas"  >
				<!--#ifdef MP-ALIPAY -->
					<canvas canvas-id="dayPie" id="dayPie" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}"
					@touchstart="touchDayPie"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
					<canvas canvas-id="dayPie" id="dayPie" class="charts" @touchstart="touchDayPie"></canvas>
				<!--#endif-->
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../../components/u-charts/u-charts.js';
	import {
		isJSON 
	} from '../../../common/checker.js';

	import {
		callCloudFunction,
		getUserOpenid
	} from '../../../common/public_util.js';
	// import config from "./config.js"
	var configs = require("./config.js");

	var _self;
	let canvaPie =null
	let dayPie = null; //日统计
	let incomeCanvasPie = null //月收入统计
	export default {
		data() {
			return {
				col:"",
				cWidth: '',
				cHeight: '',
				textarea: '',
				dayTextarea: '',
				expenditureSum: 0, //总支出
				daySum: 0, //日总支出
				incomeSum: 0, //月总收入
				date: '',
				pixelRatio: 1
			}
		},
		props:{
			tabCur:{
				type: Number, // 1-数字键盘 2-身份证号  -车牌号
				default: 0
			},
		},
		watch:{  
            tabCur(newVal, oldVal){  
				this.tabSelect()
            }  
        },
		created() {
			console.log(configs.init());
			_self = this;
			this.col=this.$parent.col
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.tabSelect()
		},
		methods: {
			async getMonthList(type="expend"){
				let res=await uni.$request({
					type
				},"bill/index/getBillChart")
				if (res.code==200) {
					let day= res.data.day.filter(res=>res.data>2)
					let month=res.data.month.filter(res=>res.data>0)
					day.sort((a,b)=>a.name.length-b.name.length)
					month.sort((a,b)=>a.name.length-b.name.length)
					this.daySum=day.reduce((total,item) => total+item.data*1,0)
					let monthSum=res.data.month.reduce((total,item) => total+item.data*1,0)
					if (type=="expend") {
						this.showPie("canvasPie",{
							series:month
						});
						this.expenditureSum=monthSum
					}else{
						this.showPie("incomeCanvasPie", {
							series:month
						});
						this.incomeSum=monthSum
					}
					this.showPie("dayPie", {
						series:day
					})
				}
				// 	
			},
			showPie(canvasId, chartData) {
				let config=configs.init()
				config.$this=this
				config.pixelRatio=this.pixelRatio
				config.width= this.cWidth * this.pixelRatio
				config.height= this.cHeight * this.pixelRatio
				config.series= chartData.series
				config.canvasId=canvasId
				if (canvasId == 'canvasPie') {
					console.log(config);
					canvaPie = new uCharts(config);
				} else if (canvasId == 'dayPie') {
					dayPie = new uCharts(config);
				} else if (canvasId == 'incomeCanvasPie') { //月收入统计
					incomeCanvasPie = new uCharts(config);
				}

			},
			/**
			 * 月支出统计
			 * @param {Object} e
			 */
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
				canvaPie.touchLegend(e, {
					animation: true
				});
			},
			/**
			 * 日支出统计
			 * @param {Object} e
			 */
			touchDayPie(e) {
				dayPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
				dayPie.touchLegend(e, {
					animation: true
				});
			},
			/**
			 * 月收入统计
			 * @param {Object} e
			 */
			touchIncomeCanvasPie(e) {
				incomeCanvasPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
				incomeCanvasPie.touchLegend(e, {
					animation: true
				});
			},


			/**
			 * 日期选择变更
			 */
			dateChange(event) {
				_self.date = event.detail.value;
				_self.getServerData();
			},
			/**
			 * tab切换
			 * @param {Object} e
			 */
			tabSelect() {
				if (this.tabCur==0) {
					this.getMonthList("expend")
				}else{
					this.getMonthList("income")
				}
			},
		}
	}
</script>
<style lang="scss">
	@import "../main.scss";
</style>
<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.grea{
		 filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter:
                grayscale(100%);
            -o-filter: grayscale(100%);
            filter: url("data:image/svg+xml;utf8,#grayscale");
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(1);
	}
</style>
